<template>
  <div class="timer">
    <div ref="startTimer"></div>
  </div>
</template>

<script>
export default {
  name: "CountDown",
  data() {
    return {
      timer: "",
      content: "",
      hour: 0,
      minutes: 0,
      seconds: 0
    };
  },
  created() {
    //this.timer = setTimeout(this.startTimer, 1000);
  },
  mounted() {
    this.startTimer();
  },
  destroyed() {
    // clearInterval(this.timer);
    if (this.timer) {
      clearTimeout(this.timer);
    }
  },

  methods: {
    startTimer() {
      this.seconds += 1;
      if (this.seconds >= 60) {
        this.seconds = 0;
        this.minutes = this.minutes + 1;
      }

      if (this.minutes >= 60) {
        this.minutes = 0;
        this.hour = this.hour + 1;
      }
      this.$refs.startTimer.innerHTML =
        (this.hour < 10 ? "0" + this.hour : this.hour) +
        ":" +
        (this.minutes < 10 ? "0" + this.minutes : this.minutes) +
        ":" +
        (this.seconds < 10 ? "0" + this.seconds : this.seconds);
      this.timer = setTimeout(this.startTimer, 1000);
    },
    getTime() {
      let time = this.hour * 60 * 60 + this.minutes * 60 + this.seconds;
      return time;
    }
  }
};
</script>

<style scoped lang="scss">
.timer {
  color: #323233;
  font-size: 14px;
  line-height: 20px;
}
</style>
